<template>
  <div>
    <div class="box">
      <van-cell>
        <template #title>
          <van-field v-model="name" label="名称" placeholder="商品名称" />
          <van-field v-model="explain" label="描述" placeholder="商品描述" />
        </template>
      </van-cell>
      <div style="margin-top: 10px">
        <van-button type="warning" block @click="update()">编辑</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { SupplierEditType } from "../api/good";
import { reactive, toRefs } from "vue";
import { showConfirmDialog, showSuccessToast } from "vant";
import { useRoute, useRouter } from "vue-router";

export default {
  setup() {
    const route = useRoute();
    const router = useRouter();

    const data = reactive({
      id: route.query.id, //商品的id
      name: route.query.name, //商品的名字
      explain: route.query.explain, //商品的描述
    });

    const event = {
      update() {
        showConfirmDialog({
          message: "确认修改吗",
        }).then(() => {
          SupplierEditType({
            id: data.id,
            name: data.name,
            explain: data.explain,
          }).then((res) => {
            if (res.result === 0) {
              showSuccessToast("修改成功");
              setTimeout(() => {
                router.go(-1);
              }, 1500);
            }
          });
        }).catch(()=>{})
      },
    };

    return {
      ...toRefs(data),
      ...event,
    };
  },
};
</script>


<style scoped>
.box {
  margin: 5px;
  padding: 5px;
  width: 95%;
}
</style>